<script setup>
import { ref } from 'vue'
import ToolSettingsChildChild from './ToolSettingsChildChild.vue'
import LeftTopChild1 from './LeftTopChild1.vue'
import { useRouter } from 'vue-router';
const router = useRouter()

const toolsettings = ref("工具设置")

const payment = ref("支付密码")

const paymentlimit = ref("支付限额")

const balancereminder = ref("修改登录密码")

const securitysetting = ref("安全设置")

const SwitchUsers = ref("切换用户")

function linkto(url){
    router.push(url)
}
//切换用户  把token删除
function del(){
    let token = localStorage.removeItem("token");
    let longToken = localStorage.removeItem("longToken");
    if( token == null  && longToken == null ){
        router.push('/login')
    }
}

</script>
<template>
    <div class="radius" style="height: 200px;" >
         <LeftTopChild1 :type="toolsettings"></LeftTopChild1>
        <el-row>
            <el-col :span="6">
                <ToolSettingsChildChild :type="payment"  @click="$emit('change',payment) ,linkto('/pay-last-password')"/>
            </el-col>
            <el-col :span="6">
                <ToolSettingsChildChild :type="paymentlimit" @click="$emit('change',paymentlimit),linkto('/pay-limit')"/>
            </el-col>
            <el-col :span="6">
                <!-- 修改登录密码 -->
                <ToolSettingsChildChild :type="balancereminder" @click="$emit('change',balancereminder),linkto('/login-password-change')"/>
            </el-col>
            <el-col :span="6">
                <ToolSettingsChildChild :type="securitysetting" @click="$emit('change',securitysetting),linkto('/fingerprint')" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <ToolSettingsChildChild :type="SwitchUsers"  @click="$emit('change',payment),del()" />
            </el-col>
            <el-col :span="6">
                
            </el-col>
            <el-col :span="6">
               
            </el-col>
            <el-col :span="6">
            
            </el-col>
        </el-row>
    </div>
</template>
<style scoped>
.radius {
    user-select: none;
    margin-top: 20px;
    width: 100%;
    border: 1px;
    border-radius: 10px;
    background-color: rgb(240, 245, 240);
}

/* .first-1 {
    width: 65px;
    position: relative;
    top: 30px;
    left: 10px;
}

.size {
    font-size: 12px;
    text-align: center;
}

.right-1 {
    text-align: center;
    margin-left: 10px;
    font-size: 30px;
    color: #e616;
}

.right-2 {
    margin-left: 10px;
    font-size: 30px;
    color: #f289ec;
}

.right-3 {
    margin-left: 10px;
    font-size: 30px;
    color: #19fa28;
}

.right-4 {
    margin-left: 10px;
    font-size: 30px;
    color: #ed1f;
}


.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    margin-top: 5px;
}*/
</style>